<template>
	<view class="content">
		<bgyx-nav-bar name="个人中心">
			<view style="display: flex;align-items: center;">
				<image @click="gosetmic" src="/static/images/sset.png" style="width: 50rpx;height: 50rpx;margin-right: 15rpx;" mode="">
				</image>
			</view>
		</bgyx-nav-bar>

		<view class="indexcontent" @click="clkcon" style="padding: 30rpx;">
			<view style="display: flex;width: 100%;justify-content: space-between;align-items: center;">
				<view style="display: flex;flex: 1;flex-direction: column;">
					<view style="font-weight: bold;font-size: 38rpx;">
						{{user.name}}
					</view>
					<view style="margin-top: 12rpx;width: 500rpx;color: #ababab;" class="u-line-2">
						{{user.note ? user.note : '未设置个人签名..'}}
					</view>
				</view>
				<view class="">
					<u-avatar @click="changeavatar" size="120"
						:src="$store.state.common.systemInfo.fileurl + 'avatar/' + user.id + '.jpg?t='+t"></u-avatar>
				</view>
			</view>

			<view
				style="width: 100%;background: linear-gradient(to right,#393f76,#6666a5);border-radius: 16rpx;padding: 25rpx;display: flex;align-items: center; margin-top: 25rpx;color: bisque;justify-content: space-between;">
				<view style="display: flex;flex-direction: column;">
					<view style="font-size: 34rpx;display: flex;align-items: center;">
						<view class="">
							账户总览
						</view>
						<image src="/static/images/eeye.png" style="width: 35rpx;height: 35rpx;margin-left: 8rpx;"
							mode=""></image>
					</view>
					<view style="margin-top: 12rpx;color: #ab9ccc;">
						总积分
					</view>
					<view style="font-size: 42rpx;font-weight: bold;margin-top: 12rpx;">
						{{user.money}}
					</view>
				</view>
				<view style="font-size: 35rpx;font-weight: bold;">
					<image src="/static/images/jjifen.png" style="width: 100rpx;" mode="widthFix"></image>
				</view>
			</view>
			
			<view @click="gokefu"
				style="width: 100%;display: flex;align-items: center;justify-content: space-between;margin-top: 40rpx;padding: 25rpx 15rpx;border-radius: 12rpx;background: #fff;">
				<view style="display: flex;align-items: center;">
					<image src="/static/images/kkfu.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
					<view style="margin-left: 12rpx;height: 40rpx;line-height: 40rpx;">
						人工客服
					</view>
				</view>
				<view class="">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

			<view @click="gopyqpage"
				style="width: 100%;display: flex;align-items: center;justify-content: space-between;margin-top: 0rpx;padding: 25rpx 15rpx;border-radius: 12rpx;background: #fff;">
				<view style="display: flex;align-items: center;">
					<image src="/static/images/internation.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
					<view style="margin-left: 12rpx;height: 40rpx;line-height: 40rpx;">
						朋友圈
					</view>
				</view>
				<view class="">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<!-- #ifdef APP -->
			<view @click="scanewm"
				style="width: 100%;display: flex;align-items: center;justify-content: space-between;margin-top: 1rpx;padding: 25rpx 15rpx;border-radius: 12rpx;background: #fff;">
				<view style="display: flex;align-items: center;">
					<image src="/static/images/camera.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
					<view style="margin-left: 12rpx;height: 40rpx;line-height: 40rpx;">
						扫一扫
					</view>
				</view>
				<view class="">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<!-- #endif -->
			<view @click="goewmpage"
				style="width: 100%;display: flex;align-items: center;justify-content: space-between;margin-top: 1rpx;padding: 25rpx 15rpx;border-radius: 12rpx;background: #fff;">
				<view style="display: flex;align-items: center;">
					<image src="/static/images/qr-code.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
					<view style="margin-left: 12rpx;height: 40rpx;line-height: 40rpx;">
						二维码
					</view>
				</view>
				<view class="">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			
			<view @click="goliveroom"
				style="width: 100%;display: flex;align-items: center;justify-content: space-between;margin-top: 15rpx;padding: 25rpx 15rpx;border-radius: 12rpx;background: #fff;">
				<view style="display: flex;align-items: center;">
					<image src="/static/images/zzbj.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
					<view style="margin-left: 12rpx;height: 40rpx;line-height: 40rpx;">
						直播间
					</view>
				</view>
				<view class="">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

			<view @click="changepswd"
				style="width: 100%;display: flex;align-items: center;justify-content: space-between;margin-top: 15rpx;padding: 25rpx 15rpx;border-radius: 12rpx;background: #fff;">
				<view style="display: flex;align-items: center;">
					<image src="/static/images/wallet.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
					<view style="margin-left: 12rpx;height: 40rpx;line-height: 40rpx;">
						钱包密码
					</view>
				</view>
				<view class="">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

			<view @click="gomoneylog"
				style="width: 100%;display: flex;align-items: center;justify-content: space-between;margin-top: 1rpx;padding: 25rpx 15rpx;border-radius: 12rpx;background: #fff;">
				<view style="display: flex;align-items: center;">
					<image src="/static/images/orderlist.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
					<view style="margin-left: 12rpx;height: 40rpx;line-height: 40rpx;">
						积分记录
					</view>
				</view>
				<view class="">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>


			<view @click="gosetpage('note')"
				style="width: 100%;display: flex;align-items: center;justify-content: space-between;margin-top: 15rpx;padding: 25rpx 15rpx;border-radius: 12rpx;background: #fff;">
				<view style="display: flex;align-items: center;">
					<image src="/static/images/lower.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
					<view style="margin-left: 12rpx;height: 40rpx;line-height: 40rpx;">
						个人签名
					</view>
				</view>
				<view class="">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

			<view @click="gosetpage('name')"
				style="width: 100%;display: flex;align-items: center;justify-content: space-between;margin-top: 1rpx;padding: 25rpx 15rpx;border-radius: 12rpx;background: #fff;">
				<view style="display: flex;align-items: center;">
					<image src="/static/images/picked-up.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
					<view style="margin-left: 12rpx;height: 40rpx;line-height: 40rpx;">
						设置昵称
					</view>
				</view>
				<view class="">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

			<view @click="exit"
				style="width: 100%;display: flex;align-items: center;justify-content: space-between;margin-top: 15rpx;padding: 25rpx 15rpx;border-radius: 12rpx;background: #fff;">
				<view style="display: flex;align-items: center;">
					<image src="/static/images/powerr.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
					<view style="margin-left: 12rpx;height: 40rpx;line-height: 40rpx;">
						退出登录
					</view>
				</view>
				<view class="">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

		</view>



		<bgyx-tab-bar />
	</view>


</template>

<script>
	import moment from 'moment';
import {
		mapState
	} from 'vuex';
	import {
		pub
	} from '../../common/event';
import util from '../../utils';
import utils from '../../utils';
	export default {
		data() {
			return {
				t:0
			}
		},
		components: {

		},
		computed: {
			...mapState({
				user: (state) => {
					return state.user.user
				}
			})
		},
		watch: {

		},
		
		onShow() {
			if (this.$store.state.friend.list.length == 0) {
				this.$store.dispatch({
					type: "friend/init",
					payload: {}
				})
			}
			this.t = moment().valueOf()
		},
		onLoad() {
			this.getdata()
			const _this = this
			// #ifdef APP
			uni.$on('uAvatarCropper', async (path) => {
				const ret = await util.uploadImage(path)
				const avatar = ret.data.pathname
				await _this.$u.post(`bgyx/bgyx/changeavatar`,{avatar})
				_this.t = moment().valueOf()
			})
			// #endif

			// #ifdef H5
			uni.$on('uAvatarCropper', async (path) => {
				// this.avatar = path;
				const f = this.base64ToFile(path, "bgyx.jpg")
				const ret = await util.uploadImage(f)
				const avatar = ret.data.pathname
				await _this.$u.post(`bgyx/bgyx/changeavatar`,{avatar})
				_this.t = moment().valueOf()
			})
			// #endif
		},
		methods: {
			base64ToFile: (base64Data, filename) => {
				// 将base64的数据部分提取出来
				const parts = base64Data.split(';base64,');
				const contentType = parts[0].split(':')[1];
				const raw = window.atob(parts[1]);

				// 将原始数据转换为Uint8Array
				const rawLength = raw.length;
				const uInt8Array = new Uint8Array(rawLength);
				for (let i = 0; i < rawLength; ++i) {
					uInt8Array[i] = raw.charCodeAt(i);
				}

				// 使用Uint8Array创建Blob，然后使用Blob创建File对象
				const blob = new Blob([uInt8Array], {
					type: contentType
				});
				const file = new File([blob], filename, {
					type: contentType
				});

				return file;
			},
			getdata: function() {},
			clkcon: function() {},
			goliveroom:async function() {
				const retps = await utils.checkPermission("请打开摄像头和麦克风权限")
				if (!retps) {
					uni.showToast({
						title: "请打开摄像头和麦克风权限",
						icon: "none"
					})
					return
				}
				// #ifdef APP
				uni.navigateTo({
					url:"/pages/user/goliveroom"
				})
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url:"/pages/user/goliveroomh5"
				})
				// #endif
			},
			changepswd: function() {
				uni.navigateTo({
					url:"/pages/user/mypyq/moneypswd"
				})
			},
			gomoneylog: function() {
				uni.navigateTo({
					url:"/pages/user/moneylog"
				})
			},
			gosetmic: function() {
				uni.navigateTo({
					url:"/pages/user/setmic"
				})
			},
			changeavatar: function() {
				const _this = this
				this.$u.route({
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					params: {
						destWidth: 200,
						rectWidth: 200,
						fileType: 'jpg',
					}
				})
			},
			gosetpage: function(e) {
				uni.navigateTo({
					url: "/pages/user/userset?type=" + e
				})
			},
			scanewm: function() {
				const _this = this
				uni.scanCode({
					success(res) {
						console.log(res)
						if (res.result) {
							if (res.result.includes('userewm_')) {
								const uid = res.result.replace('userewm_', '')
								const list = _this.$store.state.friend.list
								const user = _this.$store.state.user.user
								const ret = list.find(e => {
									return e.fid == uid
								})
								if (ret) {
									uni.navigateTo({
										url: "/pages/friend/detail?id=" + uid
									})
								} else {
									uni.navigateTo({
										url: "/pages/friend/friend?id=" + uid
									})
								}
							} else if (res.result.includes('groupewm_')) {
								const gid = res.result.replace('groupewm_', '')
								const list = _this.$store.state.friend.list
								const user = _this.$store.state.user.user
								const ret = list.find(e => {
									return e.gid == gid
								})
								if (ret) {
									uni.navigateTo({
										url: "/pages/friend/gdetail?id=" + gid
									})
								} else {
									uni.navigateTo({
										url: "/pages/friend/group?id=" + gid
									})
								}
							} else if (res.result.includes('http')) {
								plus.runtime.openWeb(res.result)
							}
						}
					}
				})
			},
			gokefu:async function(){
				const ret = await this.$u.get(`bgyx/bgyx/getdata/systeminfo/1`)
				if(ret && ret.success){
					uni.makePhoneCall({
						phoneNumber:ret.data.appname
					})
				}
				
			},
			gopyqpage: function() {
				uni.navigateTo({
					url: "/pages/user/mypyq/index"
				})
			},
			goewmpage: function() {
				uni.navigateTo({
					url: "/pages/user/userpyq"
				})
			},
			exit: function() {
				uni.showModal({
					title: "退出",
					content: "确认退出吗?",
					success(res) {
						if (res.confirm) {
							uni.clearStorageSync()
							pub("logout", {})
							uni.redirectTo({
								url: "/pages/login/login"
							})
						}
					}
				})
			}
		}
	}
</script>


<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100vh;
		overflow-y: hidden;
		padding-bottom: 120rpx;
		border-start-end-radius: 32rpx;
		border-start-start-radius: 32rpx;
		background: linear-gradient(to bottom, #ffffff, #f5f5f5);
	}
</style>